<template>
  <div class="container">
    <Category title="美食" >
      <img class="img" :src="img" alt="图片">
    </Category>

    <Category title="游戏" >
      <ul>
        <li v-for="(g, index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>

    <Category title="电影" >
      <video class="video" :src="video" controls ></video>
    </Category>
  </div>
</template>

<script>
  import Category from "./components/Category"

  export default {
    name: "App",
    components: {
      Category
    },
    data() {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
        films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》'],
        img: "https://s3.ax1x.com/2021/01/16/srJlq0.jpg",
        video: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      }
    }
  };
</script>

<style scoped>
  .container {
    display: flex;
    justify-content: space-around;
  }
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img,
  .video {
    width: 100%;
  }
</style>